<!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
</style> 
<title>Google Maps JavaScript API v3</title> 

<script type="text/javascript"> 
	var browserSupportFlag = false;
	var mobileWeb = true;
	var rootMarker = false;
	var map = false;
	
  function initializeMap(myLatlng) {
	if( ! myLatlng ){
		myLatlng = new google.maps.LatLng(10.75340,106.62900);
	}
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	rootMarker = new google.maps.Marker({
        position: myLatlng, 
        'map': map
    });
  }
  
  function updateRootMarker(lat,lng){
	var loc = new google.maps.LatLng(lat,lng);
	map.panTo(loc);
	rootMarker.setPosition(loc);
  }
  
  function getGPSLatLng(){
	  if(navigator.geolocation && mobileWeb) {
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position) {
		  initializeMap(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
		}, function() {
			initializeMap(false);
		});
	  } else {
		var toks = location.href.split('ll=');
		if(toks.length == 2){
			var ll = toks[1];
			toks = ll.split(','); 
			initializeMap(new google.maps.LatLng( new Number(toks[0]), new Number(toks[1]) ));
			document.getElementById("map_ll").innerHTML = ll;
			
			var saveIdx = location.href.indexOf('mode=save');
			if(saveIdx != -1){
				saveLocation(ll);
			}
		} else {
			initializeMap(false);
		}
	  }
	  //setTimeout("updateRootMarker(10.787876,106.685079)",5000);
  }
  
  function saveLocation(ll) {
	var sIdx = location.href.indexOf('loc_des=') + 8;
	var s = location.href.substring(sIdx);
	var loc_des = s.substring(0, s.indexOf('&'));
	var loc = loc_des + "@" + ll;
	
	var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://tantrieuf31.summerhost.info/placemarker/save_loc.php?loc=" + loc + "&callback=saveLocationCallback";
    document.body.appendChild(script);
  }
  
  function saveLocationCallback(rs){
	document.getElementById("map_ll").innerHTML = rs;
  }
  
  function detectBrowser() {
	  var useragent = navigator.userAgent;
	  var mapdiv = document.getElementById("map_canvas");
		
	  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';
	  } else {
		mapdiv.style.width = '600px';
		mapdiv.style.height = '800px';
	  }
	}
  
  function loadScript() {
    detectBrowser();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=getGPSLatLng";
    document.body.appendChild(script);
	if(location.href.indexOf('mobileApp=true') != -1){
		mobileWeb = false;
	}
	//alert(location.href.indexOf('mobileApp'));
  }
  
  window.onload = loadScript;
</script> 
</head> 
<body> 
  <div id="map_ll" style="font-weight: bold;color:yellow"></div>
  <div id="map_canvas" style="width: 100%; height: 100%"></div>
</body> 
</html> 
